<template>
	<view class="">
		<view class="topTab" @click="goBack">
			<view class="topTabstatus_bar"></view>
			<image class="topIng" src="/static/icons/newFriends_91.png" mode="widthFix"></image>
		</view>
		<!-- 页面开始 -->
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="" style="height: 91rpx;"></view>

		<view class="topImgPhoneBox" @click="deleteFun">
			<image class="topImgPhone" src="/static/icons/newFriends_262.png" mode="widthFix"></image>
		</view>

		<!-- <view class="topSearchBox">
			<view class="topSearch">
				<image class="img" src="/static/icons/iconSearch.png" mode=""></image>
				搜索 账号/手机号
			</view>
		</view>
		<view class="phoneBox">
			<image class="img1" src="/static/icons/phone.png" mode=""></image>
			<text>添加手机联系人</text>
			<image class="img2" src="/static/icons/arrow_right.png" mode=""></image>
		</view>
		<view class="fengeV">近三天</view> -->
		<!-- 近三天的 -->
		<view class="friendsBox">
			<view class="singleFriendBox" :class="item.isZk?'descOpen':''" v-for="(item, index) in list3">
				<view class="singleFriend" @click="toLinkFun(item)">
					<view class="leftImgBox">
						<image class="imgFriend" :src="'/static/headImg/'+item.imgs+'.jpg'" mode=""></image>
					</view>
					<view class="rightInfoBox">
						<view class="centerBox">
							<view class="nameBox"> {{ item.name }} </view>
							<view class="desc">
								<view class="decsLeft">{{ item.desc }}</view>
								<view class="zhankai"></view>
							</view>
						</view>
						<view class="arror">
							<image class="imgArrow" src="/static/icons/arrow_top.png" mode=""></image>
						</view>
						<view class="rightBox">{{ item.status }}</view>
					</view>
				</view>
				<view class="zhankaiBox" @click="zhankaiFun(item)">展开</view>
			</view>
		</view>

		<view class="fengeV">三天前</view>
		<view class="friendsBox">
			<view class="singleFriendBox" :class="item.isZk?'descOpen':''" v-for="(item, index) in list3Before">
				<view class="singleFriend" @click="toLinkFun(item)">
					<view class="leftImgBox">
						<image class="imgFriend" :src="'/static/headImg/'+item.imgs+'.jpg'" mode=""></image>
					</view>
					<view class="rightInfoBox">
						<view class="centerBox">
							<view class="nameBox"> {{ item.name }} </view>
							<view class="desc">
								<view class="decsLeft">{{ item.desc }}</view>
								<view class="zhankai"></view>
							</view>
						</view>
						<view class="arror">
							<image class="imgArrow" src="/static/icons/arrow_top.png" mode=""></image>
						</view>
						<view class="rightBox">{{ item.status }}</view>
					</view>
				</view>
				<view class="zhankaiBox" @click="zhankaiFun(item)">展开</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		inThreedaysInNumber,
		headImg,
		nickname,
		descs,
		statusText,
		isZks,
		hasJt,
		sex,
		addressList
	} from "../static/data/newFried-data.js";
	const list3 = ref([]);
	const list3Before = ref([])
	// 初始化的方法
	function initFun() {
		nickname.map((item, index) => {
			let _obj = {
				name: item,
				imgs: headImg[index] ? headImg[index] : 'sj1',
				desc: descs[index] ? descs[index] : "描述文字",
				status: statusText[index] ? statusText[index] : "等待验证",
				hasArrow: hasJt[index] ? hasJt[index] : true,
				isZk: isZks[index] ? isZks[index] : false,
				sex: sex[index] ? sex[index] : '',
				address: addressList[index] ? addressList[index] : '中国',
			}
			if (index < inThreedaysInNumber) {
				list3.value.push(_obj)
			} else {
				list3Before.value.push(_obj)
			}
		})
	}

	function zhankaiFun(item) {
		console.log('展开', item);
		item.isZk = true
	}

	function toLinkFun(item) {
		console.log('跳转', item);
		uni.navigateTo({
			url: "/views/friedInfo?item=" + JSON.stringify(item),
		});
	}

	function onLongPress(e) {
		console.log(e);
	}

	function goBack() {
		uni.navigateBack({
			delta: 1,
		});
	}

	function deleteFun() {
		uni.showModal({
			title: "提示",
			content: "是否删除全部",
			success: function(res) {
				if (res.confirm) {
					console.log("用户点击确定");
				} else if (res.cancel) {
					console.log("用户点击取消");
				}
			},
		});
	}
	onMounted(() => {
		initFun()
		// uni.getSystemInfo({
		// 	success: function(res) {
		// 		console.log(res);
		// 	},
		// });
	});
</script>

<style scoped lang="scss">
	page {
		background-color: #ededed;
	}

	.pageBox {
		padding: 0 30rpx;
	}

	.topImgPhoneBox {

		// padding-top: 91rpx;
		.topImgPhone {
			height: 262rpx;
			width: 100%;
			object-fit: cover;
		}
	}

	.friendsBox {
		.singleFriendBox {
			position: relative;

			.zhankaiBox {
				position: absolute;
				width: 70rpx;
				left: 510rpx;
				top: 60rpx;
				min-width: 70rpx;
				text-align: center;
				color: #475584;
				font-size: 26rpx;
				z-index: 9;
			}

			
		}
		

		.singleFriend {
			background-color: #fff;
			display: flex;
			align-items: flex-start;
			padding: 18rpx 0 0 30rpx;

			&:active {
				background-color: #d9d9d9;

				.imgArrow {
					mix-blend-mode: multiply !important;
				}
			}

			.rightInfoBox {
				flex: 1;
				display: flex;
				border-bottom: rgba(0, 0, 0, 0.07) solid 1rpx;
				padding-bottom: 18rpx;
			}

			.centerBox {
				width: 460rpx; //450
				padding-left: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.nameBox {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 30rpx;
				}

				.desc {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.5);

					.decsLeft {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 4rpx;
						color: rgba(0, 0, 0, 0.5);
					}

					.zhankai {
						position: relative;
						width: 70rpx;
						min-width: 70rpx;
						text-align: center;
						color: #475584;
						background-color: inherit;
					}
				}


			}

			.arror {
				min-width: 30rpx;
				width: 36rpx;
				display: flex;
				justify-content: center;
				padding-top: 4rpx;

				.imgArrow {
					width: 24rpx;
					height: 24rpx;
					object-fit: cover;
				}
			}

			.rightBox {
				width: 104rpx;
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.5);
				text-align: left;
			}

			.leftImgBox {
				width: 76rpx;
				height: 76rpx;
				min-width: 76rpx;
				border-radius: 6rpx;
				overflow: hidden;

				.imgFriend {
					width: 100%;
					height: 100%;
					object-fit: cover;
					margin-right: 14rpx;
				}
			}
		}

		
		.descOpen {
			.decsLeft {
				overflow: visible !important;
				white-space: normal !important;
			}
			.zhankaiBox,
			.zhankai {
				display: none;
			}
		}

	}

	.fengeV {
		height: 68rpx;
		line-height: 68rpx;
		padding-left: 30rpx;
		font-size: 26rpx;
		background-color: #ededed;
	}

	.phoneBox {
		height: 104rpx;
		padding: 0 24rpx 0 30rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		.img1 {
			width: 40rpx;
			height: 40rpx;
			object-fit: cover;
			margin-right: 33rpx;
		}

		.img2 {
			width: 40rpx;
			height: 40rpx;
			object-fit: cover;
			margin-left: auto;
		}
	}

	.topSearchBox {
		padding: 16rpx 15rpx;
		background-color: #ededed;

		.topSearch {
			background-color: #fff;
			border-radius: 10rpx;
			text-align: center;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: rgba(0, 0, 0, 0.4);

			.img {
				width: 34rpx;
				height: 34rpx;
				object-fit: cover;
				margin-right: 14rpx;
			}
		}
	}
</style>